清除浮动的css写法是什么 | 您所在的位置:网站首页 › float inherit › 清除浮动的css写法是什么 |
清除浮动的css写法是什么
发布时间:2022-03-07 10:28:12
来源:亿速云
阅读:219
作者:小新
栏目:web开发
小编给大家分享一下清除浮动的css写法是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 一、float(浮动)是什么 float属性定义元素在哪个方向浮动。 float:left元素向左浮动。 float:right元素向右浮动。 float:none默认值。元素不浮动,并会显示在其在文本中出现的位置。 float:inherit规定应该从父元素继承float属性的值。 看一段简单的代码: 左浮动 右浮动 喵 .child1{ float:left; height:500px; width:70%; background:#aa0;//黄 } .child2{ float:right; height:300px; width:30%; background:#0aa;//青 } .child3{ background:#a0a;//紫 } 201904291427231.png 二、clear是什么 clear属性指定段落的左侧或右侧不允许浮动的元素。 clear:left在左侧不允许浮动元素。 clear:right在右侧不允许浮动元素。 clear:both在左右两侧均不允许浮动元素。 clear:none默认值。允许浮动元素出现在两侧。 clear:inherit规定应该从父元素继承clear属性的值。 比如上面的例子,我们为child3加上clear:both;,便可清除浮动。(child3的左右两侧都不允许浮动元素,自然而然不会再跟在俩浮动元素的屁股后面了~) 201904291427232.png 那么,只在一侧不允许浮动是怎样的呢? 本来是酱紫的: 那么,只在一侧不允许浮动是怎样的呢? 本来是酱紫的: child1右浮动 child2右浮动 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈... .child1{ float:right; background:#aa0;//黄 } .child2{ float:right; background:#0aa;//青 } 201904291427233.png 然后,为child2加上clear:right;,在child2的右侧不允许浮动元素,所以child2就飘到了下一行。 201904291427234.png 那么,为child1加上clear:left;的时候,为什么不起效果呢?在这留个小彩蛋,欢迎大家留言讨论~ 三、浮动带来的影响 浮动带来的最大影响就是,当父元素只包含浮动的子元素的时候,父元素的高度就会塌陷(height变为0)。 像酱紫:(parent高度为0,无法显示粉色背景)
child1右浮动 child2右浮动
.parent{ background:#FBC;//粉 } 201904291427235.png 四、清除浮动的方式 1.在父元素中的结尾加一个空div div
child1右浮动 child2右浮动
.child1{ float:right; background:#aa0; } .child2{ float:right; background:#0aa; } 201904291427246.png 可见,空div高度为0,位于父盒子的最下面,使父盒子重新撑起了应有的高度。 为什么要在最后加?倘若你在中间加,效果会是酱紫: 201904291427247.png 由于空div的左右都不允许浮动元素,那么它就会另起一段,导致盒子位置的效果就像child2清除右侧浮动一样,child2跑到了child1下方。 2.在父元素设置overflow属性 •原理:设置overflow:hidden或overflow:auto,浏览器会自动检查浮动区域高度(才能知道父框的内容有无溢出) •优点:浏览器支持好 •缺点:子元素若超出父元素尺寸会被隐藏,或者父元素出现滚动条
child1右浮动 child2右浮动
201904291427248.png 当设置overflow:auto;时,父元素会出现滚动条: 201904291427249.png 3.伪元素 •原理:类似设置clear属性 •优点:浏览器支持好,普遍
child1右浮动 child2右浮动
.clearfix{ zoom:1;//zoom(IE专有属性)可解决ie6,ie7浮动问题 display:block; } .clearfix:after{ content:".";//content:"";也可 visibility:hidden; display:block; height:0; clear:both; } 以上是“清除浮动的css写法是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道! 推荐阅读: 清除浮动的css怎么写 css清除浮动的方法是什么免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 css 上一篇新闻:CSS3中ui状态伪类选择器有哪些 下一篇新闻:小程序的图片怎么转成base64 猜你喜欢 日照宏创网络:网站建设的7个流程 HTTP的长连接和短连接转换接口(API) php7中如何设置COOKIE和销毁COOKIE 最新url.cn短网址缩短生成接口(API)获取方法 php7中系统自带异常类和自己创建异常类比较 PHP碎码——删除除指定文件的其他文件及目录 PHP上传大文件解决办法 zend studio 13.5版添加php自定义code phpRedisAdmin简单配置笔记! [李景山php]每天TP5-20170106|thinkph |
CopyRight 2018-2019 实验室设备网 版权所有 |